import React, { Suspense, lazy } from 'react'
import { createBrowserRouter } from 'react-router-dom'
import App from '../App'
import ShoppingCart from '../pages/ShoppingCart'
import Talk from '../pages/Talk'
import Layout from '../layouts'
import AuthRoute from '@/components/AuthRoute'

const Login = lazy(() => import('../pages/Login'))
const Demo = lazy(() => import('../pages/Demo'))
const TableDemo = lazy(() => import('../pages/TableDemo'))
export const route = [
  {
    path: '/login',
    element: (
      <Suspense fallback={'加载中'}>
        <Login></Login>
      </Suspense>
    ),
    name: '登录',
    hiddren: true,
  },
  {
    path: '/',
    element: (
      <AuthRoute>
        <Layout></Layout>
      </AuthRoute>
    ),
    name: '首页',
    children: [
      {
        path: '',
        element: <App></App>,
        name: '首页',
      },
    ],
  },
  {
    path: '/nesting',
    element: (
      <AuthRoute>
        <Layout></Layout>
      </AuthRoute>
    ),
    name: '嵌套',
    children: [
      {
        path: 'cart',
        element: <ShoppingCart></ShoppingCart>,
        name: '加减',
      },
      {
        path: 'tableDemo',

        element: (
          <Suspense fallback={'加载中'}>
            <TableDemo></TableDemo>
          </Suspense>
        ),
        name: '表格',
      },
      {
        path: 'demo',
        name: '测试',
        element: (
          <Suspense fallback={'加载中'}>
            <Demo></Demo>
          </Suspense>
        ),
      },
      {
        path: 'talk',
        name: '评论',
        element: (
          <Suspense fallback={'加载中'}>
            <Talk></Talk>
          </Suspense>
        ),
      },
    ],
  },
]
export default createBrowserRouter(route)
